<template>
  <div class="warp">
    <div class="form-row">
      <div class="form-row-label">场所名称</div>
      <div class="form-row-content">
        <input
          class="input"
          placeholder="例如：文兴烟花爆竹批发"
          v-model="formData.dpmc"
        />
      </div>
    </div>
    <div class="form-row">
      <div class="form-row-label">场所类型</div>
      <div class="form-row-content">
        <checkbox-group class="checkbox" name="dw" @change="radioChange">
          <label
            class="checkbox"
            v-for="(item, index) in items"
            :key="'label-' + index"
          >
            <checkbox v-model="item.name" :checked="item.checked" />
            <text class="checkbox">{{ item.value }}</text>
          </label>
        </checkbox-group>
      </div>
    </div>
    <div class="form-row">
      <div class="form-row-label">场所位置</div>
      <div class="form-row-content">
        <input
          class="input"
          placeholder="请先选择地图信息然后再做调整"
          :value="getlocal"
        />
      </div>
    </div>
    <div class="cxso" @click="chooseLocation">点击选择位置</div>
    <div class="form-row hhd">
      <div class="form-row-label">所在省份</div>
      <div class="form-row-content ">
        {{ formData.provinceName }}
      </div>
    </div>
    <div class="form-row hhd">
      <div class="form-row-label">所在城市</div>
      <div class="form-row-content ">
        {{ formData.cityName }}
      </div>
    </div>
    <div class="form-row hhd">
      <div class="form-row-label">场所精度</div>
      <div class="form-row-content ">
        {{ formData.longitude }}
      </div>
    </div>
    <div class="form-row hhd">
      <div class="form-row-label">场所维度</div>
      <div class="form-row-content ">
        {{ formData.latitude }}
      </div>
    </div>
    <button
      class="button bs"
      type="primary"
      @click="saveData"
      :loading="saveLoading"
    >
      保存
    </button>
    <div class="tipdiv">
      说明：批发商可以通过进货商扫码登记货物
    </div>
    <div class="tipdiv">
      说明：零售商拥有扫码拆包分发零售等功能
    </div>
    <div class="alertDiv">
      根据监管要求，此小程序应由烟花爆竹销售点负责人使用，其他无关人员不得随意使用，后台已获取实名信息
    </div>
  </div>
</template>

<script>
import TopBasic from "@/components/TopBasic";
import BasicInfo from "@/components/BasicInfo";
import "@/utils/index";
import { isEmpty, isArray } from "lodash";
import store from "@/store/store";

export default {
  components: {
    TopBasic,
    BasicInfo
  },
  data() {
    return {
      icon: require(`@/common/image/right-icon2.png`),
      saveLoading: false,
      disAable: true,
      pfls: [],
      items: [
        { name: "批发商", value: "批发商" },
        { name: "零售商", value: "零售商" }
      ],
      formData: {
        dpmc: "",
        longitude: "",
        provinceName: "",
        cityName: "",
        latitude: "",
        name: "",
        address: "",
        isPfs: false,
        isLss: false
      }
    };
  },
  computed: {
    getlocal() {
      return this.formData.address + this.formData.name;
    },
    getdpmc() {
      return this.formData.dpmc;
    }
  },
  methods: {
    chooseLocation() {
      let this_ = this;
      this.mpvue.chooseLocation({
        success: res => {
          Object.assign(this_.formData, res);
        },
        fail: error => {
          this.mpvue.alert({
            content: error.errorMessage
          });
        }
      });
    },
    saveData() {
      let cslx = this.pfls;
      if (isEmpty(this.getdpmc) || isEmpty(this.getlocal)) {
        this.mpvue.alert({
          content: "请填写完必要信息再保存！"
        });
        return;
      }
      if (isEmpty(cslx)) {
        this.mpvue.alert({
          content: "必须要勾选一个场所类型！"
        });
        return;
      }
      if (!isArray(cslx)) {
        cslx = [this.pfls];
      }
      const url = "/pages/chose/index";
      this.mpvue.request({
        url: store.state.server + "/company/addCompany",
        data: {
          dpdata: JSON.stringify(this.formData),
          dydata: JSON.stringify({ dyuserid: store.state.userId }),
          cslx: JSON.stringify(cslx)
        },
        success: res => {
          if (res.data === false) {
            this.mpvue.alert({
              content: "操作失败!"
            });
          } else {
            this.mpvue.alert({
              content: "操作成功!",
              success: () => {
                this.formData = {
                  dpmc: "",
                  longitude: "",
                  provinceName: "",
                  cityName: "",
                  latitude: "",
                  name: "",
                  address: ""
                };
                this.mpvue.navigateBack({ url });
              }
            });
          }
        },
        fail: error => {
          this.mpvue.alert({
            content: error.errorMessage
          });
        }
      });
    },
    radioChange(a) {
      this.pfls = a.mp.detail.value;
    }
  },
  onShow() {
    this.pfls = [];
  },
  created() {
    // let app = getApp()
  }
};
</script>

<style scoped lang="scss">
@import "../../common/common";

div {
  box-sizing: border-box;
}

.bs {
  margin: 10px 0;
}

.warp {
  display: flex;
  background-color: #f3f3f3;
  height: 100vh;
  width: 100vw;
  padding: 20px 15px;
  flex-direction: column;
  box-sizing: border-box;

  .form-row {
    display: flex;
    align-items: center;
    color: rgb(51, 51, 51);
    height: 40px;
    background-color: #fff;
    padding: 6px 10px;
    border-bottom: 0.5px solid #f5f5f5;

    .form-row-label {
      width: 90px;
      margin-bottom: 1px;
      font-size: 16px;
      color: #7d7d7d;
    }

    .form-row-content {
      flex: 1;
      display: flex;
      font-size: 14px;

      .input {
        padding: 4px 8px 4px 0;
        font-size: 14px;
        flex: 1;
      }
    }
  }

  .hhd {
    background-color: rgba(221, 221, 221, 0.25);
    border: 1px solid #fff;
  }

  .cxso {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: cornflowerblue;
    font-size: 14px;
    background-color: #ffffff;
    margin-bottom: 1px;
    font-weight: bold;
  }

  label.checkbox {
    margin-right: 10px;
  }

  .tipdiv {
    color: rgba(255, 111, 0, 0.91);
    font-size: 13px;
  }

  .alertDiv {
    margin-top: 5px;
    font-size: 14px;
    color: red;
  }
}
</style>
